import React from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../../components/ui/card';
import { Badge } from '../../components/ui/badge';
import { Megaphone } from 'lucide-react';

// 模拟的公告数据
const announcements = [
  {
    id: 3,
    title: 'AI模型升级通知',
    date: '2025年9月12日',
    content: '为了提供更精准的导诊建议，我们的AI诊断模型已于今日完成升级。新模型增强了对复杂症状的理解能力，欢迎您体验。',
    tag: '功能更新',
    tagVariant: 'default',
  },
  {
    id: 2,
    title: '“我的病历”功能正式上线！',
    date: '2025年9月5日',
    content: '现在，您可以在“病历查询”页面查看过往的每一次问诊记录和AI生成的初步病历。您的健康数据，尽在掌握。',
    tag: '新功能',
    tagVariant: 'secondary',
  },
  {
    id: 1,
    title: '欢迎使用医联智导系统',
    date: '2025年8月28日',
    content: '医联智导系统正式启动试运行。我们致力于通过AI技术，为您提供智能、便捷的就医导诊服务，简化就医流程。',
    tag: '系统',
    tagVariant: 'outline',
  },
];

export function AnnouncementsPage() {
  return (
    <div className="p-4 sm:p-6 lg:p-8 bg-gray-50 min-h-screen">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-12">
          <Megaphone className="mx-auto h-12 w-12 text-blue-500 mb-4" />
          <h1 className="text-4xl font-bold text-gray-800">系统公告</h1>
          <p className="mt-2 text-lg text-gray-600">了解医联智导系统的最新动态与更新。</p>
        </div>

        <div className="space-y-8">
          {announcements.map((item) => (
            <Card key={item.id} className="shadow-md hover:shadow-lg transition-shadow duration-300">
              <CardHeader>
                <div className="flex justify-between items-start">
                  <div>
                    <CardTitle className="text-2xl font-semibold text-gray-900">{item.title}</CardTitle>
                    <CardDescription className="mt-1 text-sm text-gray-500">{item.date}</CardDescription>
                  </div>
                  <Badge variant={item.tagVariant as any}>{item.tag}</Badge>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-base text-gray-700 leading-relaxed">{item.content}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}